<template>
  <div class="password-container">
    <!-- <div class="password-text">密码修改页面</div> -->
    <el-form ref="pwdForm" :model="pwdForm" :rules="loginRules" 
    class="password-form">

      <el-form-item prop="password">
        <el-input
          ref="password"
          v-model="pwdForm.password"
          placeholder="请输入原密码"
          name="password"
          show-password
          clearable
          tabindex="1"
        />
      </el-form-item>

      <el-form-item prop="newPwd1">
        <el-input
          ref="newPwd1"
          v-model="pwdForm.newPwd1"
          show-password
          placeholder="请输入新密码"
          name="newPwd1"
          clearable
          tabindex="2"
        />
      </el-form-item>

      <el-form-item prop="newPwd2">
        <el-input
          ref="newPwd2"
          v-model="pwdForm.newPwd2"
          show-password
          placeholder="请输入确认密码"
          name="newPwd1"
          clearable
          tabindex="2"
        />
      </el-form-item>

      <el-button type="primary" style="width:100%;margin-bottom:30px;" @click="resetPassword()">提交</el-button>
    </el-form>
  </div>
</template>

<script>
import { queryUserList, queryParamList, saveUser, modifyUser, disableUser, resetPassword,
modifyParam, modifyPassword } from '@/api/sys'

export default {
  data(){
    return{
      pwdForm: {
        password: '',
        newPwd1: '',
        newPwd2: ''
      },
      loginRules: {
        password: [{ required: true, trigger: 'blur', message: '请输入原密码' }],
        newPwd1: [{ required: true, trigger: 'blur', message: '请输入新密码' }],
        newPwd2: [{ required: true, trigger: 'blur', message: '请输入确认密码' }]
      },
    }
  },
  methods:{
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    resetPassword(){
      modifyPassword(this.pwdForm).then(res => {
        this.sucMsg('修改成功')
        this.pwdForm.password = ''
        this.pwdForm.newPwd1 = ''
        this.pwdForm.newPwd2 = ''
      }).catch(err => {
        console.log(err);
      })

    },
    sucMsg(msg){//成功信息
      this.$message({
        message: msg,
        type: 'success',
        duration: 3 * 1000
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.password {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.password-form {
    // position: relative;
    width: 400px;
    max-width: 100%;
    // padding: 160px 35px 0;
    // margin: 0 auto;
    // overflow: hidden;
  }
.show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    // color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
</style>